<template>
	<view>
		<view class="address-list">
			 <radio-group class="radio-group" @change="radioChange">
			<view class="item" v-for="(item, index) of addresses" :key="item.contactListId" @click="addressAddOrUpdate"
			 :data-address-id="item.contactListId" :data-index="index">
				<view class="l">
					<view class="name">{{item.toName}}</view>
					<view class="default">
						<label class="radio">
							<radio :value="item.contactListId" :checked="item.checked" />默认
						</label>	
					</view>
				</view>
				<view class="c">
					<view class="mobile">{{item.contactNumber}}</view>
					<view class="address">{{item.address}}</view>
				</view>
				<view class="r" v-if="typeId=='update'">
					<image @click.stop="deleteAddress" :data-address-id="item.contactListId" class="del" src="../../static/image/delete.png" />
				</view>
				<view class="r" v-if="typeId=='select'">
					 <image @click.stop="updateAddress" :data-address-id="item.contactListId" class="del" src="../../static/image/edit.png" />
				</view>
			</view>
			</radio-group>
		</view>
		<view class="empty-view" v-if="addresses.length <= 0">
			<image class="icon" src="http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/noAddress-26d570cefa.png" />
			<text class="text">收货地址在哪里</text>
		</view>
		<view class="add-address" @click="addressAddOrUpdate" data-address-id="0">新建</view>
	</view>
</template>

<script>
	import cityData from '@/common/city.data.js';
	import {getFirstInfo} from '@/common/cityUtils';
	
	import { mapState,mapMutations,mapGetters } from 'vuex'
	import {
		setStore
	} from '@/common/util';
	
	export default {
		data() {
			return {
				defaultId: "",
				typeId: "",
			}
		},
		onLoad: function(e) {
			this.typeId = e.typeId;
			this.$store.dispatch("loadAddressAction", this.userId)
		},
		computed: {
			...mapState({
				addresses: state => state.address.addresses,
			}),
			...mapGetters(
				[  "hasLogin", "userId"]
			),
		},
		methods: {
			addressAddOrUpdate(event) {
				if(this.typeId == "update")
				{
					console.log('点击修改/新建地址'+ JSON.stringify(event))
					uni.navigateTo({
						url: 'addaddress?typeId=0&id=' + event.mp.currentTarget.dataset.addressId
					})
				} else if(this.typeId == "select"){
					setStore({
						name: "$sc_address_id",
						content: event.mp.currentTarget.dataset.addressId,
						type: 'session'
					})
					 uni.redirectTo({
						url: 'pages/buy/checkout'
					 })
				}
				
			},
			deleteAddress(event) {
				// console.log('点击删除', event)
				let that = this;
				uni.showModal({
					title: '',
					content: '确定要删除地址？',
					success: async function(res) {
						if (res.confirm) {
							let addressId = event.mp.currentTarget.dataset.addressId;
							this.$store.dispatch("deleteAddressAction", addressId).then(res => {
								uni.showToast({
									title: "地址删除成功"
								})
							}).catch(error => {
								uni.showToast({
									title: "删除失败，请重试"
								})
							});
						}
					}
				})
				return false;
			},
			updateAddress(event) {
				uni.navigateTo({
					url: 'addaddress?typeId=0&id=' + event.mp.currentTarget.dataset.addressId
				})
			}

		},
	}
	
</script>

<style>
	.address-list {
		padding-left: 31.25upx;
		background: #fff url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/address-bg-bd30f2bfeb.png) 0 0 repeat-x;
			background-size: auto 10.5upx;
		margin-bottom: 90upx;
		width: 96%;
	}

	.address-list .item {
		height: 156.55upx;
		align-items: center;
		display: flex;
		border-bottom: 1upx solid #DCD9D9;
	}

	.address-list .l {
		width: 125upx;
		height: 100upx;
		overflow: hidden;
	}

	.address-list .name {
		width: 125upx;
		height: 43upx;
		font-size: 29upx;
		color: #333;
		margin-bottom: 5.2upx;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.address-list .default {
		width: 40upx;
		height: 40upx;
		/* line-height: 28upx;
		text-align: center;
		font-size: 20upx;
		color: #b4282d;
		border: 1upx solid #b4282d;
		visibility: visible; */
	}

	.address-list .c {
		flex: 1;
		height: auto;
		overflow: hidden;
	}

	.address-list .mobile {
		height: 29upx;
		font-size: 29upx;
		line-height: 29upx;
		overflow: hidden;
		color: #333;
		margin-bottom: 6.25upx;
	}

	.address-list .address {
		height: 37upx;
		font-size: 25upx;
		line-height: 37upx;
		overflow: hidden;
		color: #666;
	}

	.address-list .r {
		width: 52upx;
		height: auto;
		overflow: hidden;
		margin-right: 16.5upx;
	}

	.address-list .del {
		display: block;
		width: 52upx;
		height: 52upx;
	}

	.add-address {
		background: #b4282d;
		text-align: center;
		width: 100%;
		height: 99upx;
		line-height: 99upx;
		position: fixed;
		border-radius: 0;
		border: none;
		color: #fff;
		font-size: 29upx;
		bottom: 0;
		left: 0;
	}

	.empty-view {
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.empty-view .icon {
		height: 248upx;
		width: 258upx;
		margin-bottom: 10upx;
	}

	.empty-view .text {
		width: auto;
		font-size: 28upx;
		line-height: 35upx;
		color: #999;
	}
</style>
